Line Chart এবং Area Chart গুগল চার্টের জনপ্রিয় গ্রাফগুলি যা ডেটার প্রবণতা এবং পরিবর্তন দেখানোর জন্য ব্যবহার করা হয়। এই চার্টগুলির মাধ্যমে আপনি সময়ের সাথে ডেটার গতি বা প্যাটার্ন পর্যবেক্ষণ করতে পারেন। আপনি যদি চাইলে এগুলিকে Advanced Customization করতে পারেন যাতে আপনার চার্টগুলি আরও তথ্যপূর্ণ এবং কাস্টমাইজড হয়।
এই টিউটোরিয়ালে, আমরা Line Chart এবং Area Chart এর উন্নত কাস্টমাইজেশন ফিচারগুলি কভার করবো।
১. Line Chart Advanced Customization
Line Chart ব্যবহার করে আপনি ডেটার লাইন প্রবণতা দেখাতে পারেন। এটি সময়ের সাথে বা বিভিন্ন মানের মধ্যে পরিবর্তন সহজেই প্রদর্শন করে।
Line Chart Customization Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Line Chart</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Profit');
data.addRows([
[2020, 1000, 400],
[2021, 1170, 460],
[2022, 660, 1120],
[2023, 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function', // Line smoothness
legend: { position: 'bottom' },
vAxis: {
title: 'Amount (in USD)',
gridlines: { count: 5 }, // Customizing gridlines
format: 'currency' // Formatting axis labels as currency
},
hAxis: {
title: 'Year',
format: '####', // Formatting the year as integer
gridlines: { count: 4 } // Customizing gridline count
},
series: {
0: { color: '#FF5733', lineWidth: 3 }, // Sales line customization
1: { color: '#33FF57', lineWidth: 3, pointSize: 6 } // Profit line customization
},
tooltip: { isHtml: true } // Enabling HTML tooltips for better interactivity
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Advanced Line Chart Example</h2>
<div id="line_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
ব্যাখ্যা:
- curveType:
curveType: 'function'ব্যবহার করে লাইনটি স্মুথ বা গতি সঞ্চারী করা হয়েছে। এর ফলে লাইনটি ধারাবাহিকভাবে মসৃণ দেখাবে। - Gridlines:
gridlines: { count: 5 }ব্যবহার করে গ্রিডলাইনের সংখ্যা কাস্টমাইজ করা হয়েছে। - Axis Formatting:
format: 'currency'দ্বারা অক্ষের মানগুলি মুদ্রা হিসাবে প্রদর্শিত হচ্ছে। - Series Customization:
series: {}ব্যবহার করে প্রতিটি লাইনটির রং, লাইন ওয়িডথ এবং পয়েন্ট সাইজ কাস্টমাইজ করা হয়েছে।
২. Area Chart Advanced Customization
Area Chart লাইন চার্টের মতোই কাজ করে, তবে এর নিচে একটি পূর্ণাকার এলাকা থাকে যা তথ্যের প্রবণতাকে আরও স্পষ্টভাবে উপস্থাপন করে। এই চার্টের মাধ্যমে আপনি ডেটার পরিবর্তন এবং মিল বা পার্থক্য দেখতে পারেন।
Area Chart Customization Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Area Chart</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'area']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Profit'],
['2020', 1000, 400],
['2021', 1170, 460],
['2022', 660, 1120],
['2023', 1030, 540]
]);
var options = {
title: 'Company Sales & Profit Analysis',
hAxis: {title: 'Year', format: '####'},
vAxis: {
title: 'Amount (in USD)',
gridlines: { count: 5 },
format: 'currency'
},
isStacked: true, // Makes the chart area stacked
series: {
0: { color: '#FF5733' }, // Sales area color
1: { color: '#33FF57' } // Profit area color
},
tooltip: { trigger: 'selection' }, // Tooltip on selection
legend: { position: 'top' }
};
var chart = new google.visualization.AreaChart(document.getElementById('area_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Advanced Area Chart Example</h2>
<div id="area_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
ব্যাখ্যা:
- Stacked Areas:
isStacked: trueব্যবহার করে চার্টের ক্ষেত্রগুলো একে অপরের উপর স্ট্যাক করা হয়েছে, যা Sales এবং Profit এর মধ্যে পার্থক্য বা সম্পর্ক আরও স্পষ্ট করে তোলে। - Tooltip Customization:
tooltip: { trigger: 'selection' }দ্বারা ব্যবহারকারী চার্টে ক্লিক করলে একটি টুলটিপ দেখা যাবে। - Series Customization:
series: {}দিয়ে প্রতি সিরিজের রং কাস্টমাইজ করা হয়েছে। - Gridlines & Formatting: একইভাবে, অক্ষের গ্রিডলাইন এবং ফরম্যাটিং কাস্টমাইজ করা হয়েছে, যেমন currency ফরম্যাটে ডেটা দেখানো হয়েছে।
৩. Line এবং Area Chart এর মধ্যে পার্থক্য
- Line Chart: এটি সময়ের সাথে পরিবর্তনের জন্য সবচেয়ে উপযুক্ত। এটি ডেটার প্রবণতা বা গতি দেখাতে ভালো, তবে এলাকাটি পূর্ণ হয় না।
- Area Chart: এটি Line Chart এর মতো, তবে এর নিচের অংশটি পূর্ণ করা থাকে। এটি সময়ের সাথে পরিবর্তনের পাশাপাশি ডেটার পরিমাণ বা আকার প্রদর্শন করতে সহায়ক।
উপসংহার
Google Charts এ Line Chart এবং Area Chart এর Advanced Customization করার মাধ্যমে আপনি ডেটাকে আরও আকর্ষণীয় এবং কাস্টমাইজড উপস্থাপন করতে পারেন। এই চার্টগুলি ব্যবহার করে আপনি সহজে আপনার ডেটার প্রবণতা, পরিমাণ এবং সম্পর্ক বুঝতে পারবেন এবং এগুলিকে বিভিন্ন কাস্টম স্টাইল, ফরম্যাটিং এবং ইন্টারঅ্যাকশন এর মাধ্যমে আরও কার্যকরী করে তুলতে পারবেন।
Read more
